<template>
  <div class="remarks-popup">
    <el-dialog
      title="新增备注"
      :visible.sync="showModule"
      @close="handleClose(false)"
      width="600px"
      top="15%"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="备注内容：" style="width:100%" :label-width="formLabelWidth" prop="remarks">
          <el-input
            :autosize="{ minRows: 6, maxRows: 10}"
            type="textarea"
            placeholder="请输入内容"
            v-model="form.remarks"
            maxlength="100"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose(false)">取 消</el-button>
        <el-button type="primary" @click="handleClose(true)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "RemarksPopup",
  props: {
    showRemarksPopup: {
      type: Boolean,
      default: false,
    },
    popup_title: {
      type: String,
      default: "备注",
    },
    remarks: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showModule: this.showRemarksPopup,
      form: {
        remarks: this.remarks,
      },

      rules: {
        remarks: [
          { required: true, message: "请输入备注内容", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur",
          },
        ],
      },
      formLabelWidth: "120px",
    };
  },

  created() {},
  mounted() {},
  methods: {
    handleClose(val) {
      if (!val) {
        this.$emit("on-open-sesion", false);
        return;
      }

      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("on-open-sesion", this.form);
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.el-col-16 {
  padding: 0 !important;
}
</style>